<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
    <br>
    <div class="form-group">
        <span style="display: inline-block;width: 20%">试卷编号：</span>
        <input type="text" class="form-control" style="display: inline-block;width:70%" v-model="testNum">
    </div>
    <div style="clear:both"></div>

    <br>

    <div class="panel-group" role="tablist" aria-multiselectable="true">

        <div v-for="(finalExamTask,index) in finalExamTasks" :key="index" class="panel panel-default">

            <div class="panel-heading" role="tab" style="display: block">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                       :href="'#collapse'+index" aria-expanded="false" style="display: block">
                        <div>
                            <div class="col-sm-2 control-label">题目编号(整数)：</div>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="finalExamTask.titleNum">
                            </div>
                            <div style="clear:both"></div>
                        </div>
                    </a>
                </h4>
            </div>

            <div :id="'collapse'+index" class="panel-collapse collapse" role="tabpanel">
                <div class="panel-body">
                    <div class="form-horizontal" role="form">

                        <div class="form-group">
                            <span style="display: inline-block;width: 20%">该题满分</span>
                            <input v-model="finalExamTask.fullMark" type="text" class="form-control"
                                   style="display: inline-block;width:70%">
                        </div>
                        <div class="form-group">
                            <span style="display: inline-block;width: 20%">是否为选择题:</span>
                            <input type="radio" name="optionsRadios" v-model="finalExamTask.isSelect" value=true
                                   checked> 是
                            <input type="radio" name="optionsRadios" v-model="finalExamTask.isSelect" value=false>否
                        </div>

                        <!--                        选择题-->
                        <div>
                            <div class="form-group">
                                <span style="display: inline-block;width: 20%">选择题答案为: </span>
                                <input v-model="finalExamTask.selectAnswer" type="text" class="form-control"
                                       style="display: inline-block;width:70%">
                            </div>
                        </div>

                        <!--                    非选择题，评分标准-->
                        <div>
                            <div class="panel-group" role="tablist" aria-multiselectable="true">

                                <div v-for="(scoreItem,index1) in finalExamTask.scoreItems" :key="index1"
                                     class="panel panel-default">
                                    <div class="panel-heading" role="tab" style="display: block">
                                        <h4 class="panel-title">
                                            <a class="collapsed" role="button" data-toggle="collapse"
                                               data-parent="#accordion"
                                               :href="'#collapse'+index+'-'+index1"
                                               aria-expanded="false" style="display: block">
                                                <div>
                                                    评分标准
                                                </div>
                                            </a>
                                        </h4>
                                    </div>
                                    <div :id="'collapse'+index+'-'+index1" class="panel-collapse collapse"
                                         role="tabpanel">
                                        <div class="panel-body">
                                            <div class="form-group">
                                                <span style="display: inline-block;width: 20%">描述: </span>
                                                <input type="text" class="form-control" v-model="scoreItem.description"
                                                       style="display: inline-block;width:70%">
                                            </div>
                                            <div class="form-group">
                                                <span style="display: inline-block;width: 20%">该项满分: </span>
                                                <input type="text" class="form-control" v-model="scoreItem.fullMark"
                                                       style="display: inline-block;width:70%">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button class="btn btn-primary" @click="addScoreItem(index)">添加评分标准</button>
                            </div>


                        </div>

                        <!--                    课程目标-->
                        <div>
                            <div class="form-group" v-for="(courseTarget,index2) in finalExamTask.courseTargets"
                                 :key="index2">
                                <input type="checkbox" :checked="courseTarget.checked"> <span
                                    style="display: inline-block;width: 20%">课程目标1</span>
                                权重：<input v-model="courseTarget.weight" type="text" class="form-control"
                                          style="display: inline-block;width:70%">
                            </div>


                        </div>

                    </div>

                </div>
            </div>

        </div>
        <button class="btn btn-primary" @click="addTask()">添加题目</button>
    </div>
</div>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            courseId: 21,//课程ID
            testNum: 1,//试卷编号
            finalExamTasks: [
                {
                    titleNum: 0,//题目编号
                    isSelect: true,//是否为选择题
                    selectAnswer: '',//选择题答案
                    fullMark: 10,//该题满分
                    //评分标准
                    scoreItems: [
                        {
                            description: '',//描述
                            fullMark: ''//满分
                        }
                    ],
                    //课程目标
                    courseTargets: [
                        {
                            checked: true,
                            courseTargetNum: '课程目标一',
                            weight: 0.1
                        },
                        {
                            checked: false,
                            courseTargetNum: '课程目标二',
                            weight: 0.1
                        }
                    ]
                }
            ]
        },
        methods: {

            addTask: function () {
                var finalExamTaskTemplate = {
                    titleNum: 0,//题目编号
                    isSelect: true,//是否为选择题
                    selectAnswer: '',//选择题答案
                    fullMark: 10,//该题满分
                    //评分标准
                    scoreItems: [
                        {
                            description: '',//描述
                            fullMark: ''//满分
                        }
                    ],
                    //课程目标
                    courseTargets: [
                        {
                            checked: true,
                            courseTargetNum: '课程目标一',
                            weight: 0.1
                        },
                        {
                            checked: false,
                            courseTargetNum: '课程目标二',
                            weight: 0.1
                        }
                    ]
                }
                this.finalExamTasks.push(finalExamTaskTemplate);
            }, addScoreItem: function (index) {
                var scoreItem = {
                    description: '',//描述
                    fullMark: ''//满分
                }
                this.finalExamTasks[index].scoreItems.push(scoreItem)
            }

        }
    });
</script>
<script>

</script>
</body>
</html>
